<template>
    <div class="home flex-column-center homee">
        <!-- <div style="height: 250px; box-shadow: var(--el-border-color-light) 0px 0px 10px">
            <el-splitter>
                <el-splitter-panel size="30%">
                    <div class="demo-panel">1</div>
                </el-splitter-panel>
                <el-splitter-panel :min="200">
                    <div class="demo-panel">2</div>
                </el-splitter-panel>
            </el-splitter>
        </div> -->
        <h1 @click="select">
            <HomeOutlined style="font-size: 2rem;" />
        </h1>
        <el-button type="success" @click="click">success</el-button>
        <el-text style="font-size: 1.4rem;" type="primary">
            基于Vue3框架,使用Mapbox框架,L7技术实现各种GIS效果展示
        </el-text>
        <el-text style="font-size: 1.4rem;" type="primary">
            仅供学习使用
        </el-text>
        <el-text style="font-size: 1.4rem;" type="primary">
            <el-link underline="hover" type="warning" href="https://devworld.top/zh/vscode/"
                target="vscode_blank">vscode插件vsix下载</el-link>
        </el-text>
        <el-card class="flex-row-center">
            <el-image src="/img/mapbox.svg" style=""></el-image>
            <el-image fit="contain" src="/favicon.ico"></el-image>
            <el-image src="/img/antv.svg"></el-image>
        </el-card>
        <el-button @click="openDrawer">openDrawer</el-button>

        <el-button @click="sss">openDialog</el-button>
        <div class="iconss">
            <VsCode />
            <Vue />
            <Html5 />
            <Css />
            <Js />
            <Ts />
            <Vite />
            <Windows />
            <Chrome />
            <Svgs />
            <Node />
            <Pinia />
            <VueUse />
            <Pnpm />
        </div>
        <el-scrollbar height="400px" @end-reached="loadMore">
            <p v-for="item in num" :key="item" class="scrollbar-demo-item">
                {{ item }}
            </p>
        </el-scrollbar>
        <el-dialog :append-to-body="false" v-model="visible" title="Dialog Title" destroy-on-close
            transition="dialog-slide">
            Dialog Content
        </el-dialog>

        <el-drawer v-if="mounted" append-to=".homee" v-model="drawer" title="I am the title">
            <span>Hi, there!</span>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
const drawer = ref(false)
const openDrawer = () => {
    drawer.value = true
}

const color = ref('red')
const select = () => {
    color.value = color.value == 'red' ? 'green' : 'red'
}

const num = ref(100)
const loadMore = () => {
    num.value += 5
    ElMessage.success('loadMore')
}

const click = (e) => {
    console.log(e)
    ElMessage.success('aaa')
}

const visible = ref(false)
const sss = async () => {
    try {
        await ElMessageBox.confirm('确认移除该字段吗？', '提示', {
            confirmButtonText: '确 认',
            cancelButtonText: '取 消',
            type: 'primary',
            draggable: true
        })
        ElMessage({
            message: 'confirm',
            type: 'primary',
            placement: 'bottom',
            grouping: true,
            repeatNum: 5
        })
        visible.value = true
    } catch (error) {
        console.log(error)

    }
}

const mounted = ref(false)
onMounted(() => {
    mounted.value = true
})
</script>


<style lang="less" scoped>
.home {
    :deep(.el-overlay) {
        position: absolute;
    }

    height: 100%;
    position: relative;

    h1 {
        color: v-bind(color);
    }

    .el-text {
        animation: fadeInDown;
        animation-duration: 1s;
    }

    .el-card {
        margin-top: 30px;
        height: 200px;
        animation: bounceIn;
        // animation-delay: 0.4s;
        animation-duration: 0.8s;

        .el-image {
            margin: 0 30px;

            &:nth-child(1) {
                width: 123px;
                height: 28px;
            }

            &:nth-child(2) {
                width: 32px;
                height: 32px;
            }

            &:nth-child(3) {
                width: 82px;
                height: 28px;
            }
        }
    }

    .iconss {
        width: 50%;
        margin-top: 30px;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;

        svg {
            animation: zoomIn;
            animation-duration: 0.4s;
            width: 60px;
            height: 60px;
            margin: 20px;
        }
    }
}
</style>